<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%=title%></title>
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
</head>
<body>
<div class="content">
    <%-content%>
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="setting">

</div>
<footer>
    <a href="/kindle/chapter?url=<%=prev%>" id="prev">prev</a>
    <a href="javascript:void (0)" class="menu" id="minus">minus font</a>
    <a href="javascript:void (0)" class="menu" id="menu">menu</a>
    <a href="javascript:void (0)" class="menu" id="plus">plus font</a>
    <a href="/kindle/chapter?url=<%=next%>" id="next">next</a>
</footer>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
<script src="https://cdn.bootcss.com/js-cookie/latest/js.cookie.min.js"></script>
<script>
    var scroll = window.screen.height;
    var maxheight = document.body.clientHeight - scroll
    var prev = '<%=prev%>'
    var next = '<%=next%>'
    var fontSize = Cookies.get('fontSize')|| '14'
    function setFontSize(){
        $('.content').css("font-size",fontSize + 'px')
        maxheight = document.body.clientHeight - scroll
    }
    $(function () {
        FastClick.attach(document.body);
        setFontSize()
        $('#menu').click(function () {
            if(next!=''){
                $.showLoading('')
                location.href = '/kindle/novel?url=' + next.replace(/\/c.+\.html$/,'')
            }
        })
        $('#plus').click(function () {
            fontSize = +fontSize
            Cookies.set('fontSize',++fontSize)
            setFontSize()
        })
        $('#minus').click(function () {
            fontSize = +fontSize
            if(fontSize > 14){
                Cookies.set('fontSize',--fontSize)
                setFontSize()
            }
        })
        $('.left').click(function () {
            var res =  window.scrollY - scroll;
            if(window.scrollY == 0 && prev!=''){
                $.showLoading('')
                location.href = $('#prev').attr('href')
            }
            window.scrollTo(0, res<0?0:res)
        })
        $('.right').click(function () {
            if( window.scrollY >= maxheight){
                $.showLoading('')
                location.href = $('#next').attr('href')
            }
            var res =  window.scrollY + scroll - 60;
            window.scrollTo(0, res<maxheight?res:maxheight)

        })
    })
</script>
<style>
    .content{
        padding: 10px 10px 40px;
        position: relative;
        z-index: 0;
    }
    .left{
        position: fixed;
        left: 0;
        top: 0;
        width: 60vw;
        height: calc(100vh - 40px);
        z-index: 5;
    }
    .right{
        position: fixed;
        right: 0;
        top: 0;
        width: 40vw;
        height: calc(100vh - 40px);
        z-index: 5;
    }
    footer{
        position: fixed;
        bottom: 0;
        line-height: 30px;
        background: #fff;
        width: 100%;
        text-align: center;
    }
    footer a{
        display: inline-block;
        padding: 0 5px;
        background: #000;
        border-radius: 12px;
        color: #fff;
    }
</style>
</body>
</html>